<template>
    <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
    name: "AddVectorMarker.component",
    components: {Maptalks},
    setup() {

        let mapOnLoadCB = (map) => {
            map.setCenter([106.38, 29.88])
            map.setZoom(13)

            let layer = new maptalks.VectorLayer(MapLayerConst.MAP_MARKER_LAYER).addTo(map);

            let marker0 = new maptalks.Marker([106.3745188667, 29.8839], {
                symbol: {
                    "markerType": "ellipse",
                    "markerFill": {
                        "type": "linear",
                        "places": [0, 0, 1, 1],
                        "colorStops": [
                            [0.00, "#fff"],
                            [0.50, "#fff27e"],
                            [1, "#f87e4b"]
                        ]
                    },
                    "markerLineWidth": 0,
                    "markerWidth": 100,
                    "markerHeight": 100
                }
            }).addTo(layer);

            let marker1 = new maptalks.Marker([106.3945188667, 29.8839], {
                symbol: {
                    "markerType": "ellipse",
                    "markerFill": {
                        "type": "radial",
                        "colorStops": [
                            [0.00, "rgba(216,115,149,0)"],
                            [0.50, "rgba(216,115,149,1)"],
                            [1.00, "rgba(216,115,149,1)"]
                        ]
                    },
                    "markerLineWidth": 0,
                    "markerWidth": 100,
                    "markerHeight": 100
                }
            }).addTo(layer);
        };

        return {
            mapOnLoadCB
        }
    }
}
</script>

<style scoped>

</style>
